<template>
    <!-- 设备异常上报 -->
     <el-container class="container">
        <!-- 头部导航 -->
        <el-header class="header">
            <el-header class="headerSon">
                <div>
                    <el-icon><Fold /></el-icon>
                    <span>清运工单  </span>
                </div>
                <div>
                    <img :src="userPhoto" alt="">
                    <span>{{ userName }}</span>
                </div>
            </el-header>
        </el-header>
        <!-- 底部内容 -->
        <el-container class="content">
            <el-header>
                <!-- 搜索 -->
                <div>
                    <el-form-item>
                        <el-select placeholder="请输入设备编号"></el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="block">
                            <el-date-picker
                                v-model="myForm.value1"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间" 
                            />
                            </div>
                    </el-form-item>
                    <el-button class="mySearch" type="primary">搜索</el-button>
                </div>
                <!-- 刷新/添加按钮 -->
                <div class="info">
                    <el-button type="danger" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
                    <el-button type="info"  @click="goInfo"><el-icon><Refresh /></el-icon>刷新</el-button>
                </div>
            </el-header>
            <el-footer>
                <el-table :data="ReportList" border style="width: 100%" >
                    <el-table-column label="清运工单" prop="ListNumber" width="200"></el-table-column>
                    <el-table-column label="姓名" prop="number" width="150"></el-table-column>
                    <el-table-column label="手机号" prop="community" width="170"></el-table-column>
                    <el-table-column label="设备编号" prop="describeType"></el-table-column>
                    <el-table-column label="设备地点" prop="describe" width="200"></el-table-column>
                    <el-table-column label="重量/kg" prop="ReportPerson" width="130"></el-table-column>
                    <el-table-column label="清运时间" prop="time" width="130"></el-table-column>
                    <el-table-column label="清运反馈" prop="maintenance" width="90"></el-table-column>
                    <el-table-column label="清运处理结果" prop="state" width="90">
                        <template #default="scope">
                            <span :style="{color:scope.row.state == '待处理' ? 'red' : 'green'}">
                                {{ scope.row.state }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <el-button @click="goDetails(scope.row,'详情')">编辑</el-button>
                            <el-button type="primary" @click="handleDeductPoints">扣除积分</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-footer>
        </el-container>
        <!-- 模态框 -->
        <el-dialog v-model="Dialog" :modal="true">
            <template #header>
                <span>{{ flag == true ? '扣除积分' : '编辑' }}</span>
            </template>
            <el-container>
                <!-- 详情 -->
                <div class="box" v-if="flag == false">
                    <el-row style="padding-left:2em;width: 100%;">
                        <el-form-item label="工单号">
                            <el-input disabled></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 1em;">
                        <el-form-item label="清运人员">
                            <el-input disabled></el-input>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input disabled></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left:1em;">
                        <el-form-item label="设备小区">
                            <el-input disabled></el-input>
                        </el-form-item>
                        <el-form-item label="设备编号">
                            <el-input disabled></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="清运重量">
                            <el-input disabled></el-input>
                        </el-form-item>
                        <el-form-item label="清运时间">
                            <el-input disabled></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 1em;">
                        <el-form-item label="清运反馈" style="width:100%;">
                            <el-input ></el-input>
                        </el-form-item>
                    </el-row>
                    <el-row style="padding-left: 3em;">
                        <el-form-item label="清运处理结果" style="width: 60%;">
                            <el-select placeholder="请选择处理结果">
                            <!-- 下拉选项必须用 el-option -->
                            <el-option label="已处理" value="handled"></el-option>
                            <el-option label="处理中" value="processing"></el-option>
                            <el-option label="未处理" value="unhandled"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-row>

                    <div class="close">
                        <el-button @click="Dialog = false">关闭</el-button>
                    </div>
                </div>
                <!-- 投递记录 -->
                <div class="box" v-else>
                   <el-form :model="form" ref="myForm" :rules="rules" label-width="200px">
                        <!-- 投递记录表格区域 -->
                        <el-form-item label="*投递记录">
                            <el-table :data="deliveryRecords" style="width: 100%;min-width: 550px;" highlight-current-row>
                            <el-table-column prop="nickname" label="昵称" />
                            <el-table-column prop="phone" label="手机号" />
                            <el-table-column prop="deviceNo" label="设备编号" />
                            <el-table-column prop="deviceLocation" label="设备地点" />
                            <el-table-column prop="weight" label="投递重量/kg" />
                            <el-table-column prop="points" label="积分" />
                            <el-table-column prop="amount" label="金额/元" />
                            </el-table>
                            <!-- 分页区域 -->
                            <div class="pagination" style="margin-top: 10px; text-align: right;">
                            共 {{ totalRecords }} 条
                            <el-select v-model="pageSize" style="width: 80px; margin: 0 10px;">
                                <el-option label="5" value="5" />
                            </el-select>
                            <el-pagination
                                background
                                :current-page="currentPage"
                                :page-size="pageSize"
                                :total="totalRecords"
                                layout="prev, pager, next, jumper"
                                @current-change="handlePageChange"
                            />
                            </div>
                        </el-form-item>

                        <!-- 扣除积分输入区域 -->
                        <el-form-item label="*扣除积分" prop="deductPoints">
                            <el-input v-model="form.deductPoints" placeholder="请输入扣除积分" />
                        </el-form-item>

                        <el-form-item label="*原因" prop="reason">
                            <el-input v-model="form.reason" placeholder="请输入扣除原因" />
                        </el-form-item>

                        <el-form-item label="*审核时间" prop="auditTime">
                            <el-date-picker
                            v-model="form.auditTime"
                            type="datetime"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择审核时间"
                            :default-time="['17:30:00']"
                            />
                        </el-form-item>

                        <!-- 按钮区域 -->
                        <el-form-item style="text-align: right;">
                            <el-button @click="dialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="submitForm">确定</el-button>
                        </el-form-item>
                        </el-form>
                </div>
            </el-container>
        </el-dialog>
        <!-- 分页器 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="pagination"
            />
     </el-container>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import {
      getCleanList, getCleanUpdate,getCleanEdit
    } from '@/components/api/CleanList'
// 获取投递记录列表（GET 方式）
let tableData = ref([])
let getDrawalListFun = () => {
  // 定义 GET 请求的参数（分页参数等）
  const drawalListData = {
    pageIndex: 1, 
    pageSize: 10, 
  };
  getCleanList({ params: drawalListData })
    .then(res => {
      if (res.code === 200) {
        tableData.value = res.dataset.list || [];
        total.value = res.dataset.total || 0; 
      } else {
        console.log('获取列表失败', res.msg);
        tableData.value = [];
      }
    })
};

// 页面加载时调用
getDrawalListFun();
onMounted(() => {
    //页面已加载就调数据异常工单的接口
    ReportFun()
})
let userPhoto = ref("")//用户头像
let userName = ref("用户")//用户名/手机号
let ReportFun = () =>{//调数据异常工单的接口

}
let ReportList = ref([//数据异常工单的Table里面的数据
    {
        ListNumber:"XQ202508131608",//工单号
        number:"XQ10126",//设备编号
        community:"万达B1南区南门口",//设备小区
        describeType:"监控故障",//异常类型
        describe:"asdasdasdasd",//异常描述
        ReportPerson:13111111111,//上报人信息
        time:"2025-8-25 19:58:01",//上报时间
        maintenance:"13657",//维修人信息
        maintenanceTime:"13657",//维修时间
        state:"待处理",//工单状态
    },
    {
        ListNumber:"XQ202508131608",//工单号
        number:"XQ10126",//设备编号
        community:"万达B1南区南门口",//设备小区
        describeType:"监控故障",//异常类型
        describe:"asdasdasdasd",//异常描述
        ReportPerson:13111111111,//上报人信息
        time:"2025-8-25 19:58:01",//上报时间
        maintenance:"13657",//维修人信息
        maintenanceTime:"13657",//维修时间
        state:"已处理",
    }
])
const form = reactive({
  deductPoints: '', // 初始化扣除积分字段
  reason: '',
  auditTime: ''
});
let Dialog = ref(false)//模态框的开关
let flag = ref(false)//判断点击的是添加还是详情
let goAdd = () => {//点击添加
    Dialog.value = true
    flag.value = true
}
let myForm = ref("")
let addArr = reactive({//添加时的三个数据
    abnormalDevice:"",//异常设备
    abnormalType:"",//异常类型
    abnormalDescribe:""//异常描述
})
let rules = reactive({//表填提交的规则
    abnormalDevice:[
        {required:true,message:"请选择异常设备",tigger:"change"}
    ]
})

let goInfo = () => {//点击刷新
    location.reload()
}
let goDetails = (row,v) => {//点击去详情,row---本行数据,v---详情
    Dialog.value = true
    flag.value = false
}
// 点击“扣除积分”按钮的处理逻辑
const handleDeductPoints = () => {
  flag.value = true
  Dialog.value = true 
}
//分页器
const currentPage = ref(1)
const pageSize = ref(15)
const size = ref('default')
const disabled = ref(false)
const total = ref(500)
const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize.value = val; 
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage.value = val;
}
</script>

<style lang="less" scoped>
.container{
    width:100%;
    height:100%;
    .header{
        background: #fff;
        height:80px;
        padding: 0;
        border-bottom: 1px solid  #ccc;
        box-shadow: 0px 1px 2px 0px #ccc;
        .headerSon{
            height:45px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #ccc;
            justify-content: space-between;
            div{
                display: flex;
                align-items: center;
                span{
                    display: inline-block;
                    padding:0px 10px;
                    font-size:13px;
                }
            }
        }
    }
    .content{
        width:100%;
        box-sizing: border-box;
        padding:20px;
        .el-header{
            width:100%;
            --el-header-padding: 0;
            .el-select{
                width:185px;
                margin-right:25px;
                :deep(.el-select__wrapper){
                    min-height: 25px;
                    span{
                        font-size:12px;
                    }
                    .el-select__placeholder{
                        transform: translateY(-53%);
                    }
                }
            }
            .el-button {
                height: 25px;
                font-size:12px;
                padding: 4px 10px;
            }
            .info{
                margin-top:10px;
                display: flex;
                justify-content: end;
                .el-button{
                    width:60px;
                }
            }
        }
        .el-footer {
            --el-footer-padding: 0;
            margin-top:5px;
            .el-table{
                :deep(.cell){
                    font-size:12px;
                    padding: 0 6px;
                }
                .el-button{
                    height: 23px;
                    font-size: 12px;
                    padding: 2px 10px;
                }
                :deep(.el-table__cell) {
                    padding: 3px 0;
                }
                :deep(.el-table__body .el-table_1_column_10 .cell){
                    display: flex;
                    justify-content: center;
                }
            }
        }
    }
}
:deep(.el-dialog__header){
    display: inline-block;
}
:deep(.el-dialog){
    color:#363638;
    border-radius:2px;
    --el-dialog-margin-top:10vh;
    .el-container{
        width:100%;
        font-size:12px;
        .box{
            width:100%;
            .el-row{
                width:100%;
                .el-form-item{
                    width:50%;
                    .el-form-item__label{
                        font-weight: 600;
                    }
                    .el-input__wrapper{
                        height:25px;
                    }
                    .el-select__wrapper {
                        min-height: 25px;
                        width:69%;
                    }
                    .el-select__wrapper:nth-child(2){
                        width:68%;
                    }
                    .el-input{
                        width:70%;
                    }
                    .el-textarea__inner{
                        width:100%;
                    }
                }
            }
            .close{
                width:100%;
                display: flex;
                justify-content: end;
                .el-button{
                    padding: 2px 10px;
                    font-size:12px;
                }
            }
        }
    }
    .box{
        box-sizing: border-box;
        padding: 0 20px;
        .el-form{
            width:100%;
            .el-form-item{
                width:50%;
                .el-form-item__label{
                    font-size:13px;
                }
                .el-select__wrapper{
                    min-height: 25px;
                }
                .el-select {
                    width:90%
                }
                .el-form-item__content{
                    width:90%
                }
            }
        }
    }
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.el-pagination {
    margin-bottom:20px;
    justify-content: end;
    box-sizing: border-box;
    padding-right:20px;
    font-size: 12px;
    :deep(.el-select__wrapper){
        font-size: 12px;
        min-height: 25px;
    }
    :deep(.el-input__wrapper){
        height: 25px;
        font-size: 12px;
    }
}
.block{
    margin-top: -60px;
    margin-left: 200px;
}
.mySearch{
    margin-top: -120px;
    margin-left: 600px;
}
</style>